/**
 * monitor/index
 * 是监控页的侧边栏菜单
 */

import Vue from 'vue';
import busHolder from '../../vue/bus';
import batch from '../screen/batch';
import { createGeneralJump, createScreenJump } from '../screen/monitor';
import { KEY_JUMP, KEY_SCREEN_REFRESH, KEY_SCREEN_CREATED, KEY_SCREEN_DESTROYED, KEY_SCREEN_UPDATED }
    from '../screen/events';

let bus = busHolder.getBus;

Vue.component("monitor-aside", {
  template : `
<a-layout-sider width="240" style="background: #fff;user-select:none;">
  <a-menu
    mode="inline"
    :default-selected-keys="['general']"
    :default-open-keys="['screen']"
    :style="{ height: '100%', borderRight: 0 }"
    :selected-keys="selectKeys"
    @select="onMenuSelected"
  >
    <a-menu-item key="general">
      <a-icon type="check-circle"></a-icon>
      总览 {{scope ? scope : '公共的'}} 空间
    </a-menu-item>
    <a-sub-menu key="screen">
      <span slot="title"><a-icon type="play-square"></a-icon>所有屏幕实例 ({{screenItems.length}})</span>
      <a-menu-item v-for="screen in screenItems" :key="param2Key({aside:'screen',asideParam:screen.sid})">
        {{ screen.screenName(16) }}
      </a-menu-item>
    </a-sub-menu>
    <a-sub-menu key="screen-dis">
      <span slot="title"><a-icon type="pushpin"/></a-icon>已掉线屏幕实例 ({{screenDisItems.length}})</span>
      <a-menu-item v-for="screen in screenDisItems" :key="param2Key({aside:'screen',asideParam:screen.sid})">
        {{ screen.screenName(16) }}
      </a-menu-item>
    </a-sub-menu>
  </a-menu>
</a-layout-sider>
  `,
  data : function () {
    return {
      selectKeys : ['general'],
      /** @type {batch.ScreenStatus[]} */
      screenItems : [],
      screenDisItems : [],

      scope : '',
    };
  },

  methods : {
    onScreenUpdated : function () {
      let items = batch.getAll();
      let disconnects = items.filter(s => !s.connect);
      let connects = items.filter(s => s.connect);
      let compare = (a, b) => a.sid.localeCompare(b.sid);
      connects.sort(compare);
      disconnects.sort(compare);

      this.screenItems = connects;
      this.screenDisItems = disconnects;
    },
    onMenuSelected : function (item) {
      this.onMenuRedirected(item.key);
    },
    // 发送端
    onMenuRedirected : function (key) {
      let param = this.key2Param(key);
      let jump = (param.aside == 'general') ? createGeneralJump() : createScreenJump(param.asideParam);
      bus().$emit(KEY_JUMP, jump);
    },
    // 接收端
    onJump : function (jump) {
      let keyParam = this.key2Param(this.selectKeys[0]);
      if (jump.aside == keyParam.aside && jump.asideParam == keyParam.asideParam) {
        return;
      }
      this.selectKeys = [this.param2Key(jump)];
    },
    // computed
    key2Param : function (key) {
      if (key === 'general') {
        return { aside : 'general', asideParam : '' };
      }
      if (key.startsWith('screen:')) {
        return { aside : 'screen', asideParam : key.substring('screen:'.length) };
      }
      if (key.startsWith('screenRemoved:')) {
        return { aside : 'screenRemoved', asideParam : key.substring('screenRemoved:'.length) };
      }
      return { aside : 'unknowed', asideParam : key };
    },
    param2Key : function (obj) { // obj 可以是 jump
      if (obj.aside === 'general') {
        return 'general';
      }
      if (obj.aside === 'screen') {
        return `screen:${obj.asideParam}`;
      }
      if (obj.aside === 'screenRemoved') {
        return `screenRemoved:${obj.asideParam}`;
      }
      return obj.asideParam;
    },
  },

  mounted : function () {
    bus().$on(KEY_JUMP, this.onJump);
    bus().$on(KEY_SCREEN_CREATED, this.onScreenUpdated);
    bus().$on(KEY_SCREEN_DESTROYED, this.onScreenUpdated);
    bus().$on(KEY_SCREEN_UPDATED, this.onScreenUpdated);
    bus().$on(KEY_SCREEN_REFRESH, this.onScreenUpdated);
  },
});
